<template>
  <div class="ele-body">
    <a-card :bordered="false" title="首饰返厂信息">
      <infoTable :receiptsDetail="receipts_detail" />
      <div class="margin-y-30">
        <a-space>
          <a-input-search
            placeholder="请输入条形码"
            enter-button="确定"
            size="middle"
            v-model:value="codeVal"
            @search="onSearch"
          />
          <template v-if="receipts_detail.status < 1">
            <a-button class="btn" @click="showLuru = true"
              ><span>批量录入</span></a-button
            >
            <a-button type="primary" class="ele-btn-icon" @click="toSelect()"
              ><span>选择货品</span></a-button
            >
          </template>
        </a-space>

        <a-form
          class="margin-y-15"
          :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
          :wrapper-col="{
            md: { span: 17 },
            sm: { span: 20 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="10" :sm="10" :xs="10">
              <goodsTable
                :total="total"
                :tableData="tableData"
                :optShow="receipts_detail.status < 1 ? true : false"
                @action="action"
                @getNext="getDetail"
              />
            </a-col>
            <a-col :md="14" :sm="14" :xs="14">
              <detail
                ref="detailRef"
                :code="query.code"
                :goodsCode="goodsCode"
                v-if="goodsCode"
              />
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- 选择货品弹窗 -->
    <select-goods
      v-if="showCheck"
      v-model:visible="showCheck"
			:typeCode="receipts_detail.come_type_code"
      @load="getDetail"
      @done="done"
    />
    <!-- 批量录入条码弹窗 -->
    <luru v-if="showLuru" v-model:visible="showLuru" @luOpt="luOpt" />
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined
  } from '@ant-design/icons-vue';
  import { actionFn } from '@/utils/action.js';
  import infoTable from './components/returnInfoTable.vue';
  import goodsTable from '@/components/jewelry/goodsTable.vue';
  import selectGoods from '@/components/jewelry/select-goods.vue';
  import luru from '@/components/jewelry/luru.vue';
  import detail from './components/detail.vue';
  import { uploadUrl } from '@/config/setting';
  import {
    receipts_purchase_detail,
    add_goods,
    del_goods,
    batch_enter
  } from '@/api/jewelry/receipts_store_return';

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  console.log(query);
  const loading = ref(false);
  const showCheck = ref(false);
  const goodsCode = ref(null);
  const receipts_detail = ref({});
  const goods = ref({});
  const visible = ref(false);
  //货品list
  const tableData = ref([]);
  const total = ref(0);

  const codeVal = ref(null);

  const detailRef = ref(null);
  const showLuru = ref(false);

  const onSearch = () => {
    getDetail(1);
  };
  const action = (row) => {
    console.log('row', row);
    if (row.action == 'look') {
      lookGoods(row);
    } else if (row.action == 'del') {
      delGoods(row);
    }
  };
  const lookGoods = (row) => {
    goodsCode.value = row.code;
    detailRef.value.change(goodsCode.value);
  };
  const delGoods = (row) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        del_goods({ code: query.code, goods_code: row.code })
          .then((res) => {
            message.success(res.msg);
            getDetail();
          })
          .catch((e) => {
            message.error(e);
          });
      }
    });
  };
  const luOpt = (val) => {
    batch_enter({ code: query.code, goods: val })
      .then((res) => {
        message.success(res.msg);
        getDetail();
      })
      .catch((e) => {
        message.error(e);
      });
  };

  //主石信息
  const table1 = reactive({
    loading: false,
    column: [],
    tableData: []
  });
  //副石信息
  const table2 = reactive({
    loading: false,
    column: [],
    tableData: []
  });

  onMounted(() => {
    getDetail(1);
  });
  const getDetail = (page) => {
    receipts_purchase_detail({
      code: query.code,
      bar_code: codeVal.value,
      page: page
    }).then((res) => {
      total.value = res.goods.total;
      goods.value = res.goods.data[0];
      res.goods.data.forEach((item, index) => {
        item.sku_info.forEach((m, mindex) => {
          item[m.column] =
            m.column_type == 'select' ||
            m.column_type == 'selectajax' ||
            m.column_type == 'selectajaxlike'
              ? m.value_name
              : m.value;
        });
      });
      goodsCode.value = res.goods.data.length > 0 ? res.goods.data[0].code : '';
      tableData.value = res.goods.data;
      receipts_detail.value = res.receipts_detail;
    });
  };
  const toSelect = () => {
    showCheck.value = true;
  };

  const done = (form) => {
    let data = {
      url: '/jewelry/receipts_store_return/add_goods'
    };
    actionFn(data, form, reloadTable);
  };
  const reloadTable = () => {
    showCheck.value = false;
    getDetail();
  };
  /* 更新visible */
  const updateVisible = (value) => {
    visible.value = value;
  };
</script>

<style lang="less" scoped>
  :deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 440px !important;
    height: 180px !important;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    .ant-upload {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
</style>
